<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>横向滑动</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            font-size: 2vmin;
        }

        p,
        img {
            pointer-events: none;
            user-select: none;
        }

        div {
            display: flex;
            justify-content: center;
            align-items: center;
            user-select: none;
        }

        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            background-color: #171717;
        }

        .emptybox {
            width: 65rem;
            height: 40rem;
            background-color: #17f700;
            border-radius: 5rem;
            margin-bottom: 8rem;
            font-family: sans-serif;
            font-size: 8rem;
            color: #f7f7f7;
            font-weight: 900;
            text-transform: uppercase;
        }

        .scrollbox {
            justify-content: start;
            align-items: start;
            width: 100%;
            overflow: hidden;
        }

        .scrollbox_container {
            justify-content: start;
            height: 100vh;
            flex-shrink: 0;
        }

        .scrollbox_container_card {
            position: relative;
            width: 65rem;
            height: 40rem;
            background-color: #f7f7f7;
            border-radius: 5rem;
            margin-left: 5rem;
            flex-shrink: 0;
            overflow: hidden;
        }

        .scrollbox_container_card p {
            font-family: sans-serif;
            font-size: 6rem;
            color: #171717;
            font-weight: 900;
            text-transform: uppercase;
            z-index: 1;
        }

        .scc_city {
            position: absolute;
            bottom: 0;
            height: 100%;
            opacity: 0.7;
        }

        .scc_truck {
            position: absolute;
            bottom: 0;
            height: 6rem;
        }

        .scc_city1,
        .scc_truck1 {
            left: 0;
        }

        .scc_city2,
        .scc_truck2 {
            left: calc(-100% + -5rem);
        }

        .scc_city3,
        .scc_truck3 {
            left: calc(-200% + -10rem);
        }

    </style>
</head>

<body>
    <div class="emptybox"> empty </div>
    <div class="emptybox"> empty </div>
    <div class="scrollbox">
        <div class="scrollbox_container">
            <div class="scrollbox_container_card">
                <p>card one</p>
                <img class="scc_city scc_city1" src="imgs/city.svg">
                <img class="scc_truck scc_truck1" src="imgs/truck.svg">
            </div>
            <div class="scrollbox_container_card">
                <p>card two</p>
                <img class="scc_city scc_city2" src="imgs/city.svg">
                <img class="scc_truck scc_truck2" src="imgs/truck.svg">
            </div>
            <div class="scrollbox_container_card">
                <p>card three</p>
                <img class="scc_city scc_city3" src="imgs/city.svg">
                <img class="scc_truck scc_truck3" src="imgs/truck.svg">
            </div>
        </div>
    </div>
    <div class="emptybox"> empty </div>
    <div class="emptybox"> empty </div>
</body>
<script>
    // JIEJOE produce
    // b站主页：https://space.bilibili.com/3546390319860710
    const scrollbox = {
        container: document.querySelector(".scrollbox_container"),
        cards: [...document.querySelectorAll(".scrollbox_container_card")],
        trucks: [...document.querySelectorAll(".scc_truck")],
        citys: [...document.querySelectorAll(".scc_city")],
        trigger_distance: 0,
        border_distance: 0,
        distance: 0,
        resize() {
            let _scrollbox = document.querySelector(".scrollbox");
            _scrollbox.style.height = `${this.container.offsetWidth}px`;
            this.trigger_distance = _scrollbox.offsetTop;
            this.border_distance = _scrollbox.offsetTop + _scrollbox.offsetHeight - innerHeight;
        },
        move() {
            if (scrollY >= this.trigger_distance &&
                scrollY <= this.border_distance) {
                this.distance = scrollY - this.trigger_distance;
                this.container.style.transform = `translateY(${this.distance}px)`;
                let distance_x =
                    this.distance / (this.border_distance - this.trigger_distance) *
                    (this.container.offsetWidth - innerWidth);
                for (let i = 0; i < this.cards.length; i++) {
                    this.cards[i].style.transform = `translateX(${-distance_x}px)`;
                    this.trucks[i].style.transform = `translateX(${distance_x * 1.2}px)`;
                    this.citys[i].style.transform = `translateX(${distance_x * 0.5}px)`;
                };
            };
        }
    };
    scrollbox.resize();
    window.addEventListener("resize", () => {
        scrollbox.resize();
    });
    window.addEventListener("scroll", () => {
        scrollbox.move();
    });
</script>

</html>
